<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<style>
			
			div{
				width: 200px;
				height: 200px;
				border:1px aliceblue solid;
			}
		</style>
		
	</head>
	<body>
		<button id="btn1" class="primary">改变b1颜色</button>
		<button id="btn2" class="primary">改变所有divi颜色</button>
		<button id="btn3" class="primary">改变class为mini颜色</button>
		
		<div id="d1"></div>
		
		<div class="mini"></div>
		<span class="mini">dsssssssssssssssss</span>
		<p class="mini">jfkddddddddddddd</p>
	</body>
	<script>
		/*
		//1.获取id为btn1的按钮
		var btn1 = document.getElementById("btn1");
		//2.给按钮添加一个鼠标点击事件
		btn1.onclick = function(){
			//3.在事件的函数中，改变id为b1的元素背景为红色
			document.getElementById("d1").style.backgroundColor = "red";
		}*/
		
		//1.获取id为btn1的按钮,通过id选择器: $("#id名称")
		var $btn1 = $("#btn1");
		/*//2.给按钮添加一个鼠标点击事件
		在jQuery中把事件封装为了函数，事件去掉on
		鼠标点击事件：
		click(function(){
			事件的响应函数
		});
		*/
		$btn1.click(function(){
			/*
			 * //3.在事件的函数中，改变id为b1的背景色为红色
			 * 在jQuery中，把获取样式和设置样式封装为了函数
			 * 获取样式：jQuery对象.css("样式名称")
			 * 设置样式：jQuery对象.css("样式名称","样式属性")
			 */
			$("#d1").css("background-color","red");
		})
		
		$("#btn2").click(function(){
			//改变所有div演示为绿色
			$("div").css("background-color","green");
		})
		
		$("#btn3").click(function(){
			$(".mini").css("background-color","yellow");
		})
	</script>
</html>

/*
 * jQuery中有一个函数val,相当于dom对象的value属性
 获取表单标签中的属性值：jQuery对象.val();
 设置表单中的value属性值：jQuery对象.val(新属性值);
 
 
 */
/*
 * jQuery对象text方法，相当于dom对象中innerHTML属性
 获取标签中的文本： jQuery对象.text();
 设置标签中的文本：jQuery对象.text(新文本)
 */